<template>
  <div class="delivery-profile">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>个人信息</span>
          <el-button type="primary" @click="handleEdit" v-if="!isEditing">编辑</el-button>
          <div v-else>
            <el-button @click="cancelEdit">取消</el-button>
            <el-button type="primary" @click="saveProfile">保存</el-button>
          </div>
        </div>
      </template>

      <el-form :model="profileForm" label-width="100px" :disabled="!isEditing">
        <el-form-item label="用户名">
          <el-input v-model="profileForm.username" disabled />
        </el-form-item>
        
        <el-form-item label="角色">
          <el-tag type="info">配送员</el-tag>
        </el-form-item>
        
        <el-form-item label="手机号码">
          <el-input v-model="profileForm.phone" />
        </el-form-item>
        
        <el-form-item label="电子邮箱">
          <el-input v-model="profileForm.email" />
        </el-form-item>
        
        <el-form-item label="配送区域">
          <el-input v-model="profileForm.deliveryArea" />
        </el-form-item>
      </el-form>

      <!-- 配送统计信息 -->
      <el-divider>配送统计</el-divider>
      <el-row :gutter="20" class="statistics">
        <el-col :span="8">
          <el-card shadow="hover">
            <template #header>
              <div class="stat-header">
                <span>今日配送</span>
              </div>
            </template>
            <div class="stat-value">{{ statistics.todayDeliveries }}</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <template #header>
              <div class="stat-header">
                <span>本月配送</span>
              </div>
            </template>
            <div class="stat-value">{{ statistics.monthDeliveries }}</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <template #header>
              <div class="stat-header">
                <span>总配送量</span>
              </div>
            </template>
            <div class="stat-value">{{ statistics.totalDeliveries }}</div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const isEditing = ref(false)

// 个人信息表单
const profileForm = reactive({
  username: '',
  phone: '',
  email: '',
  deliveryArea: ''
})

// 配送统计
const statistics = reactive({
  todayDeliveries: 0,
  monthDeliveries: 0,
  totalDeliveries: 0
})

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    // 这里应该调用后端 API 获取用户信息
    // 暂时使用模拟数据
    profileForm.username = userStore.user?.username || '配送员001'
    profileForm.phone = '13800138000'
    profileForm.email = 'delivery001@example.com'
    profileForm.deliveryArea = '北京市朝阳区'
  } catch (error) {
    console.error('获取用户信息失败:', error)
    ElMessage.error('获取用户信息失败')
  }
}

// 获取配送统计
const fetchStatistics = async () => {
  try {
    // 这里应该调用后端 API 获取统计数据
    // 暂时使用模拟数据
    statistics.todayDeliveries = 12
    statistics.monthDeliveries = 156
    statistics.totalDeliveries = 1234
  } catch (error) {
    console.error('获取统计数据失败:', error)
    ElMessage.error('获取统计数据失败')
  }
}

// 编辑按钮点击
const handleEdit = () => {
  isEditing.value = true
}

// 取消编辑
const cancelEdit = () => {
  isEditing.value = false
  fetchUserInfo() // 重新获取数据，放弃修改
}

// 保存个人信息
const saveProfile = async () => {
  try {
    // 这里应该调用后端 API 保存用户信息
    // 暂时模拟保存成功
    await new Promise(resolve => setTimeout(resolve, 1000))
    ElMessage.success('保存成功')
    isEditing.value = false
  } catch (error) {
    console.error('保存失败:', error)
    ElMessage.error('保存失败')
  }
}

onMounted(() => {
  fetchUserInfo()
  fetchStatistics()
})
</script>

<style scoped>
.delivery-profile {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistics {
  margin-top: 20px;
}

.stat-header {
  font-size: 14px;
  color: #606266;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
  text-align: center;
  padding: 10px 0;
}

.el-divider {
  margin: 24px 0;
}
</style> 